<template>
  <div ref="myChart" class="line-chart" />
</template>
<script >
import * as echarts from 'echarts'
export default {
  name: 'LineChart',
  props: ['stData', 'gridSet'],
  data() {
    return {

    }
  },
  mounted() {
    this.chartRun()
  },
  methods: {
    chartRun() {
      const myChart = echarts.init(this.$refs.myChart)
      window.addEventListener('resize', myChart.resize)

      const that = this

      const option = {
        grid: {
          x: 40,
          y: 26,
          x2: 26,
          y2: 36
        },

        xAxis: {
          type: 'value',
          max: that.gridSet.max, // 最大值
          min: 0, // 最小值
          interval: that.gridSet.interval, // 间隔
          splitLine: {
            // x网格样式
            show: true,
            lineStyle: {
              color: 'rgba(105, 160, 216, 0.24)',
              type: 'solid'
            }
          },
          axisLine: {
            // x坐标轴样式
            lineStyle: {
              type: 'solid',
              color: 'rgba(105, 160, 216, 0.24)', // 左边线的颜色
              width: '1' // 坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: '#a7c7f5'
            },
            formatter: function(value) {
              return (value / 60).toFixed(0)
            }

          }

        },
        yAxis: {
          type: 'value',
          max: that.gridSet.max, // 最大值
          min: 0, // 最小值
          interval: that.gridSet.interval, // 间隔
          splitLine: {
            // x网格样式
            show: true,
            lineStyle: {
              color: 'rgba(105, 160, 216, 0.24)',
              type: 'solid'
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'rgba(105, 160, 216, 0.24)', // 左边线的颜色
              width: '1' // 坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: '#a7c7f5'
            },
            formatter: function(value) {
              return (value / 60).toFixed(0)
            }
          }
        },
        series: [
          {
            data: that.stData,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#8cd5c2', // 改变折线点的颜色
                lineStyle: {
                  color: '#ffd200' // 改变折线颜色
                }
              }
            }
          }
        ]

      }
      myChart.setOption(option)
    }
  }
}
</script>
<style scoped>
.line-chart{
 width: 100%;
 flex: 1;
 }
</style>
